<template>
  <el-dialog title="选择退货地址" v-model="visible" width="50%" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-table ref="tableRef" :data="addressData.list" stripe v-loading="loading" @current-change="onCurrentChange">
      <el-table-column fixed="left" width="60">
        <template #default="scope">
          <el-radio-group v-model="scope.row.checked">
            <el-radio :label="true">&nbsp;</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column prop="shippingPerson" label="收货人" />
      <el-table-column prop="shippingMobile" label="联系电话" />
      <el-table-column prop="shippingAddressDetail" label="退货地址" />
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="onSubmitClick">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api'
const emit = defineEmits(['update:visible', 'change'])
const props = defineProps(['visible'])

const visible = computed({
  get: () => {
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})

const addressData = reactive({
  list: []
})

let loading = ref(false)
let tableRef = ref(null)

const loadData = async () => {
  loading.value = true
  let { data, err } = await api.get('/medinstrument/third/supplier/shippingDetail')
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    addressData.list = data
    addressData.list[0].checked = true
  }
}

const onSubmitClick = () => {
  const selected = addressData.list.find((e) => e.checked)
  if (selected) {
    emit('change', selected)
  }
  visible.value = false
}

const onCurrentChange = (val) => {
  addressData.list.forEach((e) => (e.checked = false))
  val.checked = true
}

onMounted(() => {
  loadData()
})
</script>

<style></style>
